<template>
  <div class="esthetics">
    <!-- 整体软装页面 -->
    <!-- 版心 -->
    <div class="center">
      <!-- banner -->
      <div class="banner">
        <img src="../../public/ztrz_img/banner.png" alt="" />
      </div>
      <!-- 金额计算 -->
      <div class="jejs">
        <!-- 背景图 -->
        <div class="bg_js">
          <img src="../../public/ztrz_img/bmk_bg.png" alt="" />
        </div>
        <div class="js_detail">
          <h2 class="title1">
            全成都已有 <span class="s">8000</span> 户家庭选择致美优家
          </h2>
          <!-- 用户输入称呼 面积 电话 -->
          <div class="user_msg">
            <div class="msg">
              <img src="../../public/ztrz_img/chenghu.png" alt="" />
              <input type="text" placeholder="请输入您的称呼" name="" id="" />
            </div>
            <div class="fgx">|</div>
            <div class="msg">
              <img src="../../public/ztrz_img/mianji.png" alt="" />
              <input
                type="text"
                placeholder="请输入您的房屋面积"
                name=""
                id=""
              />
              <span style="margin-left: 8px">m<sup>2</sup></span>
            </div>
            <div class="fgx">|</div>
            <div class="msg">
              <img src="../../public/ztrz_img/dianhua.png" alt="" />
              <input
                type="text"
                placeholder="请输入您的联系方式"
                name=""
                id=""
              />
            </div>
            <div class="fgx">|</div>
            <div class="jijia">
              <img src="../../public/ztrz_img/jijia.png" alt="" />
              <span>10000</span>
              <div>元</div>
            </div>
            <!-- <div class="fgx">|</div> -->
            <div class="jijia_btn">开始计算</div>
          </div>
        </div>
      </div>

      <!-- 调研部分 -->
      <div class="dy">
        <img class="td" src="../../public/ztrz_img/td.png" alt="" />
        <img class="zd" src="../../public/ztrz_img/zd.png" alt="" />
        <img class="zd_point" src="../../public/ztrz_img/zd_point.png" alt="" />
        <img class="design" src="../../public/ztrz_img/design.png" alt="" />
        <img class="zp" src="../../public/ztrz_img/zp.png" alt="" />
      </div>

      <!-- ABCD -->
      <div class="abcd">
        <img class="title5" src="../../public/ztrz_img/title5.png" alt="" />
        <img src="../../public/ztrz_img/a.png" alt="" />
        <img src="../../public/ztrz_img/b.png" alt="" />
        <img src="../../public/ztrz_img/c.png" alt="" />
        <img src="../../public/ztrz_img/d.png" alt="" />
      </div>
      <!-- 团队成员照片 -->
      <div class="designers">
        <img src="../../public/ztrz_img/designers.png" alt="" />
        <!-- 按钮 点击弹出弹窗 -->
        <div>预约设计服务</div>
      </div>

      <!-- 客户实景案例 -->
      <div class="case">
        <!-- 背景图 -->
        <div class="eg_bg">
          <img src="../../public/ztrz_img/eg_bg.png" alt="" />
        </div>
        <!-- 标题 -->
        <div class="title_img">
          <img
            class="title_img"
            src="../../public/ztrz_img/title6.png"
            alt=""
          />
        </div>
        <!-- 轮播图 -->
        <div class="swiper_case">
          <!-- swiper1 -->
          <swiper
            class="swiper_casetop"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg1_big.png" alt="" />
            </swiper-slide>
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg2_big.png" alt="" />
            </swiper-slide>
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg3_big.png" alt="" />
            </swiper-slide>
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg4_big.png" alt="" />
            </swiper-slide>
            <div class="swiper-paginationcase" slot="pagination"></div>
            <div
              class="swiper-button-next swiper-button-white"
              slot="button-next"
            ></div>
            <div
              class="swiper-button-prev swiper-button-white"
              slot="button-prev"
            ></div>
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper_case_buttom"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg1_small.png" alt="" />
            </swiper-slide>
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg2_small.png" alt="" />
            </swiper-slide>
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg3_small.png" alt="" />
            </swiper-slide>
            <swiper-slide class="slide">
              <img src="../../public/ztrz_img/eg4_small.png" alt="" />
            </swiper-slide>
          </swiper>
        </div>
      </div>

      <!-- 拎包入住 -->
      <div class="lbrz">
          <img src="../../public/ztrz_img/sl.png" alt="">
          <img src="../../public/ztrz_img/flow.png" alt="">
          <!-- 点击预约的图片弹出窗口 -->
          <img src="../../public/ztrz_img/yy.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOptionTop: {
        autoplay: {
          delay: 3000, //滚动间隔时长
          // 用户操作swiper之后,是否要停止自动滚动. 默认true
          disableOnInteraction: false,
        },
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        pagination: {
          el: ".swiper-paginationcase",
          clickable: true, //可以点击
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
};
</script>

<style lang="scss">
.esthetics {
  width: 100%;
  .center {
    width: 100%;
    .banner {
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
    }

    .jejs {
      width: 100%;
      position: relative;
      .bg_js {
        width: 100%;
        img {
          width: 100%;
          height: 170px;
          display: block;
        }
      }
      .js_detail {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .title {
          text-align: left;
          color: #333333;
          font-size: 24px;
          font-weight: 400;
          // font-family: YouYuan;
        }
        .s {
          color: #b5a055;
          font-size: 30px;
        }

        .user_msg {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          margin-top: 30px;

          .fgx {
            // height: 30px;
            margin: 0 20px;
            color: #999999;
            font-size: 26px;
            // line-height: 30px;
            // margin: 0 auto;
            text-align: center;
          }

          .msg {
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
              width: 20px;
              height: 20px;
            }

            input {
              width: 180px;
              height: 32px;
              border: none;
              margin-left: 8px;
            }
          }
          .jijia {
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              width: 80px;
              margin-left: 8px;
              color: #333333;
              font-weight: bold;
              font-size: 24px;
              border-bottom: 2px solid #333333;
            }
            div {
              font-size: 14px;
              margin-left: 8px;
            }
          }

          .jijia_btn {
            width: 100px;
            background: #b5a055;
            height: 35px;
            color: #fff;
            border: none;
            padding: 0 18px;
            margin-left: 40px;
            text-align: center;
            line-height: 35px;
          }
        }
      }
    }

    .dy {
      width: 100%;
      // padding-top: 20px;
      img {
        width: 90%;
        display: block;
        margin: 0 auto;
        padding-top: 20px;
      }
      .td {
        width: 90%;
      }

      .zd {
        width: 100%;
      }

      .zd_point {
        width: 90%;
      }

      .design {
        width: 90%;
        margin-top: 50px;
        padding: 0;
      }

      .zp {
        width: 100%;
      }
    }

    .abcd {
      width: 100%;
      padding-top: 20px;
      img {
        display: block;
        margin: 0 auto;
        width: 90%;
        margin-top: 20px;
      }
      .title5 {
        width: 252px;
        margin-bottom: 30px;
      }
    }

    .designers {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        display: block;
      }
      div {
        position: absolute;
        bottom: 7.5%;
        left: 260px;
        width: 140px;
        height: 40px;
        border: 1px solid #fff;
        color: #fff;
        font-family: inherit;
        font-size: 18px;
        text-align: center;
        line-height: 40px;
      }
    }

    // 轮播图样式
    .case {
      width: 100%;
      height: 1100px;
      background-color: #24282b;
      position: relative;
      overflow: hidden;

      .eg_bg {
        width: 100%;
        img {
          width: 100%;
        }
      }

      .title_img {
        display: block;
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translate(-50%, 0%);
      }
      .swiper_case {
        width: 100%;
        position: absolute;
        top: 180px;
        bottom: 0;
        padding-top: 40px;
        text-align: center;

        .swiper_casetop {
          width: 90%;
          position: relative;
        }
        .swiper-paginationcase {
          position: absolute;
          z-index: 1;
          bottom: 20px;
          color: #999999;

          .swiper-pagination-bullet {
            background: rgba(200, 200, 200, 0.6);
            opacity: 1;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            margin: 0 5px;
          }

          .swiper-pagination-bullet-active {
            background: #ffffff;
          }
        }

        .swiper-button-next {
          color: #fff;
          position: absolute;
          right: 80px;
        }
        .swiper-button-prev {
          color: #ffffff;
          position: absolute;
          left: 80px;
        }

        // 下半块轮播图
        .swiper_case_buttom {
            margin-top: 20px;
            width: 60%;
          box-sizing: border-box;

          .swiper-slide {
            width: 25%;
            opacity: 0.4;
            img{
                width: 200px;
                display: block;
            }
          }
          .swiper-slide-active {
            opacity: 1;
          }
        }

        
      }
    }

    // 领包入住
    .lbrz{
        width: 100%;
        img{
            width: 100%;
            display: block;
        }
    }
  }
}
</style>